<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../js/cropperjs-master/dist/cropper.min.css" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<style>
			#redo{
				position: fixed;
				bottom: 20px;
				left :20px;
				font-size: 16px;
			}
			#save{
				position: fixed;
				bottom: 20px;
				right :20px;
				font-size: 16px;
				
			}
			#image{
				width: 100% !important;
			}
		</style>
	</head>
	<body>
		<div  class="mui-content">
			<div style="position: absolute;top: 0px;right: 0px;left: 0;bottom: 0;">
				<img  id="image" src="">
			</div>
			<button id="redo" type="button" class="mui-action-back mui-btn mui-btn-danger mui-btn-outlined mui-pull-left">取消</button>
			<button id="save" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right">保存</button>
		</div>
		<script type="text/javascript" src="../js/mui.min.js" ></script>
		<script src="../js/bexta.js"></script>
		<script type="text/javascript" src="../js/cropperjs-master/dist/cropper.js" ></script>
		<script>
			mui.plusReady(function () {
			    var image = document.getElementById('image');
				var cropper = null;
				var resImg = null;
				//在选择或者拍摄完成后跳出裁剪页面并把图片路径传递到此页面
				image.src = plus.webview.currentWebview().imgSrc;
//				image.src = "../img/WechatIMG1.jpeg";
				initCropper();
				document.getElementById("save").addEventListener("tap",getImg);
//				document.getElementById("redo").addEventListener("tap",function(){
//					cropper.rotate(90);
//				});
//				document.getElementById("undo").addEventListener("tap",function(){
//					cropper.rotate(-90);
//				});
				function initCropper(){
					cropper = new Cropper(image, {
						aspectRatio: 1/1,
						dragMode:'move',
						rotatable:true,
						minCropBoxWidth:100,
						minCropBoxHeight:100,
						minCanvasWidth:200,
						minCanvasHeight:200,
						minContainerWidth:200,
						minContainerHeight:200,
						crop: function(data) {
						 }
					});
				}
				function getImg(){
					resImg =  cropper.getCroppedCanvas({
						  width: 200,
						  height: 200
					}).toDataURL();
//						console.log(resImg)
						bexta.ajax(api.upload_image, function(res){
							mui.fire(bexta.getWebview().opener(),"cropperImg",{resImg:res.img});
							mui.back();	
						},{data:{photo:resImg, uid:bexta.getStorage(MERCHANT).uid}} );
					
				}
			})
		</script>
	</body>
</html>
